<#import '/fed/demo/inc/macros.ftl' as macros />
<@macros.header 'validate'>
  <#-- <link href="${cssRoot}/admin-validate.css" rel="stylesheet"> -->
</@macros.header>

<#global demos = [
  {
    'n': 'required',
    'd': '\'\'',
    's': '必填项',
    'e': '<form id="demo-form" action="/" target="_blank"><div class="form-group" style="position:relative"><input type="text" name="test" required placeholder="required"><input type="submit"></div></form>',
    'c': ['new Validate({
  element: \'#demo-form\'
});']
  },
  {
    'n': 'pattern',
    'd': '\'\'',
    's': 'HTML5 的 pattern',
    'e': '<form id="demo-form2" action="/" target="_blank"><div class="form-group" style="position:relative"><input type="text" name="test" pattern="^\\w+$" placeholder="pattern=^\\w+$"><input type="submit"></div></form>',
    'c': ['new Validate({
  element: \'#demo-form2\'
});']
  },
  {
    'n': 'async',
    'd': 'N/A',
    's': '输入框',
    'e': '<form id="demo-form3" action="/" target="_blank"><div class="form-group" style="position:relative"><input type="text" name="test" placeholder="nothing in html"><input type="submit"></div></form>',
    'c': ['new Validate({
  element: \'#demo-form3\',
  eventType: \'change\',
  customRules: {
    test: {
      async: function (callback) {
        var self = this;

        setTimeout(function () {
          callback.call(self, true);
        }, 100);
      }
    }
  }
});']
  },
  {
    'n': 'eventType',
    'd': 'undefined',
    's': '输入框',
    'e': '<form id="demo-form4" action="/" target="_blank"><div class="form-group" style="position:relative"><input type="text" name="test" required><input type="submit"></div></form>',
    'c': ['new Validate({
  element: \'#demo-form4\',
  eventType: \'change\'
});']
  }
]>

<@macros.body 'validate' 'validate'>
<pre><code>&lt;form id="demo-form" action="/" target="_blank"&gt;
  &lt;div class="form-group" style="position:relative"&gt;
    &lt;input type="text" name="test" required pattern="^\w+$" minlength="3" maxlength="5"&gt;
    &lt;input type="submit"&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
</@macros.body>

<@macros.footer>
  <script>
    seajs.use(['validate'], function (Validate) {

      $('.demo > button').on('click', function () {
        new Function('Validate', this.nextElementSibling.textContent)(Validate);
      })/*.trigger('click')*/;
    });
  </script>
</@macros.footer>